<template>
    <div class="lotsReleaseDetail">
        <div class="getBack_SAVE">
            <div class="l_getBack">
               <div class="l_back_box">
                    <el-button type="text" @click="goback"><i class="el-icon-back"></i>返回</el-button>
                </div> 
                <el-divider direction="vertical"></el-divider>
                <div class="l_back_tit">处置需求发布详情</div>
            </div>
        </div>
        <div class="all_box">
            <div class="disposalUniInfor">
                <div class="title_firm">处置单位信息</div>
                <el-descriptions class="margin-top" :column="4" border>
                    <el-descriptions-item>
                        <template slot="label">
                            处置单位
                        </template>
                        {{firmForm.dispose_unit}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            联系人
                        </template>
                        {{firmForm.contacts}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            联系电话
                        </template>
                        {{firmForm.phone}}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            处置地点
                        </template>
                        {{firmForm.address}}
                    </el-descriptions-item>
                </el-descriptions>
                <div class="title_firm margin-top">处置物资信息</div>
                <div class="formLablezj">
                    <span class="lablezj">拍卖会名称:</span>
                    <span>{{firmForm.name}}</span>
                </div>
            </div>

<!-- -------------------------------------------------------------------- -->

            <div class="lots_Table">
                <div class="title_LT">
                    <div class="title_firm">标的物信息</div>
                    <div>
                        <i class="el-icon-setting" style="color: #409EFF;"></i>
                    </div>
                </div>
                <el-table
                    :data="lotsTable"
                    :border="true"
                    height="180"
                    :header-cell-style="{background:'#f5f7fa'}">
                    <el-table-column type="index" label="#" align="center">
                    </el-table-column>
                    <el-table-column label="标的类型" prop="type_label" align="center">
                    </el-table-column>
                    <el-table-column label="标的名称" prop="name" align="center">
                    </el-table-column>
                    <el-table-column label="单位" prop="unit" align="center">
                    </el-table-column>
                    <el-table-column label="预估数量" prop="amount" align="center">
                    </el-table-column>
                    <el-table-column label="保留单价(元)" prop="min_price" align="center">
                    </el-table-column>
                    <el-table-column label="起始单价(元)" prop="start_price" align="center">
                    </el-table-column>
                    <el-table-column label="是否含税" prop="taxnum" align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100">
                    <!-- <template slot-scope="scope">
                        <el-button class="table_btn" type="text" @click="editOperate(scope.row)">查看</el-button>
                    </template> -->
                    </el-table-column>
                </el-table>
            </div>
            <div class="word_content">
                <div class="l_box">
                    <div class="l_dispose">
                        <div class="title_firm">处置计划</div>
                        <el-form :inline="true" :model="firmForm" class="demo-form-inline" label-width="90px">
                            <el-form-item label="拟拍日期:" prop="protocols_time">
                                <el-date-picker
                                v-model="firmForm.protocols_time"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择拟拍日期"
                                size="mini"
                                default-time="10:00:00"
                                :disabled="true"
                                style="width: 180px;">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="处置方式:" prop="dispose_way">
                                <el-select v-model="firmForm.dispose_way" :disabled="true" size="mini" placeholder="请选择" style="width: 150px;">
                                    <el-option
                                    v-for="item in dispose_wayOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    size="mini">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="委托方式:" prop="delegationMode">
                                <el-select v-model="delegationMode"  :disabled="true" size="mini" placeholder="请选择" style="width: 150px;">
                                    <el-option
                                    v-for="item in delegationModeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    size="mini">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="服务单位:" prop="address" class="firmTable_s">
                                <el-table
                                    :data="serveData"
                                    border
                                    style="width: 100%"
                                    :header-cell-style="{background:'#f5f7fa'}">
                                    <el-table-column
                                    prop="serveFirm"
                                    label="服务单位" 
                                    width="280">
                                    </el-table-column>
                                    <el-table-column
                                    prop="contacts"
                                    label="联系人">
                                    </el-table-column>
                                    <el-table-column
                                    prop="phone"
                                    label="联系电话"
                                    width="110">
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="l_approve">
                        <div class="title_firm">审批要求</div>
                        <el-form :model="approveForm" class="demo-form-inline" label-width="100px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="拍前审批:">
                                        <span v-if="approveForm.preposition_check =='0'" class="colorWord">未审批</span>
                                        <span v-else-if="approveForm.preposition_check =='1'" class="colorWord">已审批</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <div class="fs_color_tips colorRed m_top">1、先拍后审:选择“未审批”，则拍后审批自动选择“需要”。</div>
                                    <div class="fs_color_tips colorRed">2、先审后拍:选择“已审批”，请上传“内部审批单”。</div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="内部审批单:" prop="preposition_check_file">
                                        <span v-for="item in approveForm.preposition_check_file" :key="item.id">
                                            {{item.file_name}}
                                            <i class="el-icon-download" @click="downLoadFile(item.file_path)"></i>
                                            <i class="el-icon-view" @click="downLoadFile(item.file_path)"></i>
                                        </span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="拍后审批:">
                                        <span v-if="approveForm.postposition_check =='0'" class="colorWord">不需要</span>
                                        <span v-else-if="approveForm.postposition_check =='1'" class="colorWord">需要</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <div class="fs_color_tips colorRed m_top">1、根据企业管理规定是否需要审批后才能成交。</div>
                                    <div class="fs_color_tips colorRed">1、最高价超保留价是否需要审批才能成交。</div>
                                </el-col>
                            </el-row>
                            
                        </el-form>
                    </div>
                </div>
                <div class="r_box">
                    <div class="one_editor">
                        <div class="title_firm title_rbox">资质要求</div>
                        <!-- <quill-editor ref="myTextEditor" v-model="firmForm.certification_require"
                            :options="editorOption1"  @blur="ChangeFn('certification_require')">
                        </quill-editor> -->
                        <tinymce v-model="firmForm.certification_require"></tinymce>
                    </div>
                    <div class="two_editor">
                        <div class="title_firm title_rbox">其他要求</div>
                        <!-- <quill-editor ref="myTextEditor" v-model="firmForm.else_require"
                            :options="editorOption2"  @blur="ChangeFn('else_require')">
                        </quill-editor> -->
                        <tinymce v-model="firmForm.else_require"></tinymce>
                    </div>
                    
                </div>
            </div>
        </div>
        <dialogLotsDetail 
        :lotsId="lotsId" 
        :showLotsAdd="showLotsAdd"
        @cancelDiaAdd="cancelDiaAdd"/>
    </div>
</template>

<script>
import {areaTree} from '@/api/user'
import {examineEntrustAuction} from '@/api/release'
import tinymce from '@/components/Tinymce.vue';
import { mapState } from 'vuex'
import dialogLotsDetail from './dialogLotsDetail.vue'
import {intervalTime} from '@/utils/index'
export default {
    name: 'lotsReleaseDetail',
    components: {
        tinymce,dialogLotsDetail
    },
    data(){
        return{
            editorOption1:{
                modules: {
                    toolbar: [
                        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                        // ["blockquote", "code-block"], // 引用  代码块
                        [{
                        header: 1
                        }, {
                        header: 2
                        }], // 1、2 级标题
                        [{
                        list: "ordered"
                        }, {
                        list: "bullet"
                        }], // 有序、无序列表
                        [{
                        script: "sub"
                        }, {
                        script: "super"
                        }], // 上标/下标
                        [{
                        indent: "-1"
                        }, {
                        indent: "+1"
                        }], // 缩进
                        // [{'direction': 'rtl'}],                         // 文本方向
                        [{
                        size: ["small", false, "large", "huge"]
                        }], // 字体大小
                        [{
                        header: [1, 2, 3, 4, 5, 6, false]
                        }], // 标题
                        [{
                        color: []
                        }, {
                        background: []
                        }], // 字体颜色、字体背景颜色
                        [{
                        font: []
                        }], // 字体种类
                        [{
                        align: []
                        }], // 对齐方式
                        ["clean"], // 清除文本格式
                    ], //工具菜单栏配置
                },
                placeholder: "请输入资质要求需要特别说明的事项", //提示
                readyOnly: false, //是否只读
                theme: "snow", //主题 snow/bubble
                syntax: true, //语法检测
            },
            editorOption2:{
                modules: {
                    toolbar: [
                        ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
                        // ["blockquote", "code-block"], // 引用  代码块
                        [{
                        header: 1
                        }, {
                        header: 2
                        }], // 1、2 级标题
                        [{
                        list: "ordered"
                        }, {
                        list: "bullet"
                        }], // 有序、无序列表
                        [{
                        script: "sub"
                        }, {
                        script: "super"
                        }], // 上标/下标
                        [{
                        indent: "-1"
                        }, {
                        indent: "+1"
                        }], // 缩进
                        // [{'direction': 'rtl'}],                         // 文本方向
                        [{
                        size: ["small", false, "large", "huge"]
                        }], // 字体大小
                        [{
                        header: [1, 2, 3, 4, 5, 6, false]
                        }], // 标题
                        [{
                        color: []
                        }, {
                        background: []
                        }], // 字体颜色、字体背景颜色
                        [{
                        font: []
                        }], // 字体种类
                        [{
                        align: []
                        }], // 对齐方式
                        ["clean"], // 清除文本格式
                    ], //工具菜单栏配置
                },
                placeholder: "请输人其他要求，包括拉货时间，看货事项等", //提示
                readyOnly: false, //是否只读
                theme: "snow", //主题 snow/bubble
                syntax: true, //语法检测
            },
            
            /********处置单位信息***********/ 
            firmForm:{
                
            },
            provinceOptions:[], //处置地点数据
            /***处置计划***********/ 
            dispose_wayOptions:[
                {
                value: '1',
                label: '一次性处置'
                },
                {
                value: '2',
                label: '拉货权处置'
                },
            ], //处置方式下拉数据
            delegationModeOptions:[{
                value: '1',
                label: '独家委托'
            }],
            delegationMode:'1', //独家委托
            serveData:[{serveFirm:'河北一盟拍卖有限公司',contacts:"李恒东",phone:"18731185621"}], //服务单位列表数据
      
            /***审批要求*************/ 
            approveForm:{
                preposition_check:'', //拍前审批0不需要1需要
                postposition_check:'', //拍卖后审批 0不需要1需要 当拍前审批为0不需要时 拍后审批必须为1需要
                preposition_check_file:'', //文件
                lots_ids:'',
            },
            postCheckDis:false, //拍后审批是否禁用
            fileList:[],
            /*****标的物信息*******/
            lotsTable:[], //标的物信息表格数据
            // 标的新增弹窗
            lotsId:'',
            showLotsAdd:false,
        }
    },
    computed:{
        ...mapState('user',['token','userInfo','lotsAry'])
    },
    created(){
        this.firmForm.dispose_unit = this.userInfo.company_name; //处置单位名称
        this.firmForm.contacts = this.userInfo.username; //处置单位联系人
        this.firmForm.phone = this.userInfo.mobile; //处置单位手机号
        this.list();
    },
    methods:{
        goback(){
            this.$router.push('/sellerRelease')
        },
        list(){
            areaTree().then(res =>{
                this.provinceOptions = res.data;
            });

            let id = this.$route.query.id;
            examineEntrustAuction({auction_id:id}).then(res => {
                res.data.auctionData.protocols_time = intervalTime(res.data.auctionData.protocols_time);
                this.firmForm = res.data.auctionData;
                this.lotsTable = res.data.lotsData;
                this.approveForm.preposition_check = res.data.auctionData.preposition_check;
                this.approveForm.postposition_check = res.data.auctionData.postposition_check;
                this.approveForm.preposition_check_file = res.data.auctionData.preposition_check_file;
                this.approveForm.lots_ids = res.data.auctionData.lots_ids;

                // this.areatreeAfter(res.data.auctionData.area);
            });
           

        },
        //点击下载内部审批单
        downLoadFile(urlVal){
            const url = this.imgurls+urlVal;
            window.open(url);
        },
        //点击查看
        editOperate(row){
            this.lotsId = row.id;
            this.showLotsAdd = true;
        },
        cancelDiaAdd(){
            this.showLotsAdd = false;
        },

        areatreeProvince(data){
            for(var i=0;i < data.length; i++){
                if(data[i].id == this.firmForm.province){
                    this.firmForm.province = data[i].name; 
                    let children =  data[i].children;
                    for(var j=0;j < children.length; j++){
                        if(children[j].id == this.firmForm.city){
                            this.firmForm.city = children[j].name;
                            let child =  children[j].children;
                            for(var k=0;k < child.length; k++){
                                if(child[k].id == this.firmForm.area){
                                    this.firmForm.area = child[k].name;
                                }
                            }
                        }
                    }
                }
            }
        },

        
    },
    destroyed(){
    }

}
</script>

<style lang="scss">
.lotsReleaseDetail {
    background-color: #f5f6f7;
    min-height: calc(100vh - 90px);
    // 公共样式
    .title_firm{
        font-size: 14px;
        font-weight: 700;
    }
    .colorWord{
        color: #606266;
    }

    .getBack_SAVE{
        padding: 0px 10px;
        background-color: #fff;
        // border-top: 1px solid #ccc;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        .l_getBack{
            display: flex;
            align-items: center;
            .l_back_tit{
                font-size: 15px;
                font-weight: bold;
            }
        }
    }
    .margin-top{
        margin-top: 10px;
    }
    //=============== 
    .all_box{
        padding: 10px;
    }
    .disposalUniInfor{
        background-color: #fff;
        border-radius: 4px;
        padding: 10px 10px 0 10px;
        .formLablezj{
            font-size: 14px;
            padding: 10px;
            color: #606266;
            .lablezj{
                font-size: 14px;
                line-height: 40px;
                padding: 0 12px 0 0;
                font-weight: 700;
            }
        }
    }
    .lots_Table{
        background-color: #fff;
        border-radius: 4px;
        padding: 10px;
        margin-top: 10px;
        ::v-deep.el-table th{
            padding: 5px 0;
        }
        ::v-deep.el-table td{
            padding: 5px 0;
        }
        .title_LT{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }
    }
    .word_content{
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .l_box{
            width: 840px;
            margin-right: 10px;
            .l_dispose{
                background-color: #fff;
                border-radius: 4px;
                padding: 10px;
                .firmTable_s{
                    .el-form-item__content{
                        line-height: 0px;
                    }
                }
                
            }
            .l_approve{
                margin-top: 10px;
                background-color: #fff;
                border-radius: 4px;
                padding: 10px;
                .fs_color_tips{
                    font-size: 12px;
                }
                .el-icon-download{
                    color: #409EFF;
                    cursor: pointer;
                    margin: 0 10px;
                }
                .el-icon-view{
                    color: #409EFF;
                    cursor: pointer;
                }
            }
        }
        .r_box{
            width: 840px;
            background-color: #fff;
            border-radius: 4px;
            
            .one_editor{
                padding: 10px;  
                border-bottom: 5px solid #f5f6f7;
            }
            .two_editor{
                padding: 10px;  
            }
            .title_rbox{
                margin-bottom: 10px;
            }
        }
    }
    .m_top{
        margin-top: 10px;
    }
}
.ql-container{
      height: 100px;
    }


</style>